<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AngularJS按钮事件绑定</title>
    <script type="text/javascript" src="../js/angular.min.js"></script>

</head>

<body>
<!-- ng-app="myapp" 定义了一个模块-->
<div ng-app="myapp" ng-controller="myctrl">

    <div>
        <!-- ng-model模型作用-->
        <input type="text" name="name" ng-model="name"/>

        <input type="button" value="清空" ng-click="clearVal()"/>
    </div>
    <div>
        <!-- {{}}等价于ng-bind 用于数据显示-->
        Hello,{{name}}
    </div>
</div>

<script type="text/javascript">
    //初始化 myapp 模块
    var myapp = angular.module("myapp", []);

    // 定义模块的控制器
    //依赖输入，$scope作用域对象，操作当前作用域视图
    myapp.controller("myctrl", ["$scope", function ($scope) {
        //对模型进行初始化赋值
        $scope.name = "下次虚构";

        $scope.clearVal = function () {
            $scope.name = "";
        }

    }]);
</script>


</body>
</html>